<template>
  <el-menu
    default-active="/home/"
    background-color="#333"
    :unique-opened="true"
    text-color="#fff"
    :collapse-transition="true"
    class="menu"
    :collapse="!isCollapse"
    :router="true"
  >
    <template v-for="item in menus">
      <el-submenu v-if="!item.meta.hidden" :index="item.path" :key="item.name">
        <template slot="title">
          <i :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>

        <template v-for="child in item.children">
          <el-menu-item
            v-if="!child.meta.hidden"
            :key="child.name"
            :index="child.name"
            :route="{ name: child.name }"
            :class="{ 'is-active': child.name === $route.name }"
          >
            <i :class="child.meta.icon"></i>
            <span slot="title">{{ child.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-submenu>
    </template>
  </el-menu>
</template>

<style scoped lang="less">
.menu {
  box-sizing: border-box;
  border: none;
  height: 100%;
  width: 100%;
  .el-menu-item.is-active {
    color: #409eff !important;
  }
}
</style>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({ isCollapse: "isShowAside", menus: "menus" }),
  },
};
</script>